<template>
  <div class="content-box">
    <van-sticky>
      <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
    </van-sticky>
    <swipe-box :list="gallery" imgStr="img_url" height="100%"></swipe-box>
    <tool-box></tool-box>
    <info-box :info="info"></info-box>
    <goods-params-box :attribute="attribute"></goods-params-box>
    <div class="desc" v-html="info.goods_desc"></div>
    <issue-box :issue="issue"></issue-box>
    <goodsList
      :list="goodsList"
      title="相关产品"
      @gotoDetails="gotoMore"
    ></goodsList>
    <goods-detalis-footer
      :goodsCount="goodsCount"
      @showSku="showSkuFn"
    ></goods-detalis-footer>
    <back-top></back-top>
    <sku
      v-if="skuShow"
      @changeFn="(v) => (number = v)"
      :skuShow="skuShow"
      @close="closeFn"
      :info="info"
    ></sku>
  </div>
</template>

<script>
import {
  getGoodsDetalis,
  getGoodsRelated,
  getGoodsCount,
  addGoodsCart
} from '@/api/home'
import InfoBox from './components/info-box.vue'
import GoodsParamsBox from './components/goods-params-box.vue'
import IssueBox from './components/issue-box.vue'
import GoodsDetalisFooter from './components/goodsDetalis-footer.vue'
import sku from './components/sku.vue'
export default {
  name: 'goodsDetalis',
  components: {
    InfoBox,
    GoodsParamsBox,
    IssueBox,
    GoodsDetalisFooter,
    sku
  },
  props: ['id'],
  data () {
    return {
      gallery: [], // 轮播图
      info: {},
      attribute: [],
      issue: [],
      goodsList: [],
      goodsCount: 0,
      skuShow: false,
      number: 1,
      productList: []
    }
  },
  methods: {
    showSkuFn () {
      // 如果是已经显示  那就走添加购物车逻辑
      if (this.skuShow) {
        this.addCart()
        this.skuShow = false
      } else {
        this.skuShow = true
      }
    },
    async getDetalis (id) {
      const res = await getGoodsDetalis({ id: id })
      this.gallery = res.data.gallery
      this.info = res.data.info
      this.attribute = res.data.attribute
      this.issue = res.data.issue
      this.productList = res.data.productList
    },
    async getRelated (id) {
      const res = await getGoodsRelated({ id: id })
      this.goodsList = res.data.goodsList
    },
    async getCount () {
      const res = await getGoodsCount()
      this.goodsCount = res.data.cartTotal.goodsCount
    },
    gotoMore (id) {
      this.getDetalis(id)
      this.getRelated(id)
    },
    async addCart () {
      const params = {
        goodsId: this.id,
        productId: this.productList[0].id,
        number: this.number
      }
      const res = await addGoodsCart(params)
      if (res.errno === 0) {
        this.$notify({ type: 'success', message: '加入购物车成功' })
        this.getCount()
      } else {
        this.$notify({ type: 'error', message: '加入购物车失败' })
      }
    },
    closeFn () {
      this.skuShow = false
      this.number = 1
    }
  },
  created () {
    this.getDetalis(this.id)
    this.getRelated(this.id)
    this.getCount()
  }
}
</script>

<style scoped lang='less'>
/deep/.van-nav-bar {
  background-color: @red;
  .van-nav-bar__title {
    color: #fff !important;
  }
  .van-icon {
    color: #fff;
  }
}
.cell {
  margin-bottom: 0.2rem;
}
.desc {
  width: 100%;
  height: 100%;
  p {
    width: 100% !important;
    margin: 0;
    img {
      width: 100% !important;
      display: block !important;
    }
  }
}
.infoGoods {
  width: 100%;
  background-color: #fff;
  margin-top: 0.05rem;
  .title {
    width: 100%;
    height: 0.4rem;
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.4rem;
    position: relative;
    h3 {
      width: 30%;
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
    span {
      width: 50%;
      height: 0.03rem;
      background-color: #ccc;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  }
}
</style>
